<template>
  <div class="dashboard-page">
    <div class="welcome-block">
      <h2>你好，<span class="username">{{ username }}</span></h2>
      <p class="subtitle">欢迎来到 SF Platform 控制台</p>
    </div>

    <div class="quick-access-section">
      <div class="section-header">
        <span class="section-title">快捷入口</span>
        <span class="section-desc">快速访问常用功能</span>
      </div>
      <div class="quick-access-grid">
        <div
          class="quick-item"
          v-for="(item, i) in filteredShortcuts"
          :key="i"
          @click="goTo(item.path)"
          :style="{ '--item-color': item.color }"
        >
          <div class="item-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="item-content">
            <div class="item-label">{{ item.label }}</div>
          </div>
          <div class="item-arrow">
            <i class="el-icon-right"></i>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getFunds } from '@/api/dashboard'
import { maskToLastLimit } from '@/utils/ctrl'
export default {
  name: "Dashboard",
  components: {
  },
  data() {
    return {
      allowedRids: [1],
      // nickname: localStorage.getItem("nickname") || "用户",
      username: localStorage.getItem("username") || "用户",
      list:[],
      loading_acc: false,
      role:0,
      shortcuts:this.hashmap.shortcuts,
    };
  },

  computed: {
    filteredShortcuts() {
      if (this.canSeeAccount) return this.shortcuts
      return this.shortcuts.filter(
        (item) => !["账户", "人员"].includes(item.label)
      )
    },
    canSeeAccount() {
      return this.allowedRids.includes(this.rid)
    },
  },

  created(){
    this.rid = Number(localStorage.getItem('rid'))

  },
  methods: {
    maskToLastLimit,
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-page {
  padding: 20px 30px;
  .welcome-block {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f9fbff, #f2f5fa);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  }

  h2 {
    font-size: 30px;
    font-weight: 700;
    color: #1f2d3d;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;

    .username {
      color: #409eff;
      margin: 0 6px;
      font-weight: 700;
    }

    &::after {
      content: "👋";
      margin-left: 6px;
      font-size: 28px;
      animation: wave 2s infinite;
      transform-origin: 70% 70%;
      display: inline-block;
    }
  }

  .subtitle {
    color: #606c80;
    font-size: 15px;
    margin-top: 4px;
    letter-spacing: 0.3px;
  }
}

@keyframes wave {
  0%, 60%, 100% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-6deg);
  }
  90% {
    transform: rotate(8deg);
  }
}

  .shortcut-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 35px;

    .shortcut {
      width: 130px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      padding: 18px 0;
      border-radius: 10px;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      }

      .icon {
        font-size: 26px;
        color: #409eff;
        margin-bottom: 8px;
      }

      .label {
        font-size: 14px;
        font-weight: 500;
        color: #333;
      }
    }
  }

}

.quick-access-section {
  margin-bottom: 35px;
  
  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #1f2d3d;
    }
    
    .section-desc {
      font-size: 13px;
      color: #909399;
    }
  }
  
  .quick-access-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    .quick-item {
      display: flex;
      align-items: center;
      padding: 10px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #f0f0f0;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--item-color, #409eff);
        transition: width 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        
        &::before {
          width: 6px;
        }
        
        .item-icon {
          transform: scale(1.1);
          background: var(--item-color, #409eff);
          
          i {
            color: #fff;
          }
        }
        
        .item-arrow {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      .item-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        margin-left: 10px;
        background: rgba(64, 158, 255, 0.1);
        transition: all 0.3s ease;
        
        i {
          font-size: 22px;
          color: var(--item-color, #409eff);
          transition: color 0.3s ease;
        }
      }
      
      .item-content {
        flex: 1;
        
        .item-label {
          font-size: 16px;
          font-weight: 600;
          color: #1f2d3d;
          margin-bottom: 4px;
        }
      }
      
      .item-arrow {
        opacity: 0;
        transform: translateX(-5px);
        transition: all 0.3s ease;
        
        i {
          font-size: 14px;
          color: #c0c4cc;
        }
      }
    }
  }
}

</style>
